<template>
	<div id="today-calendar">
		<div class="calendar-wrapper">
			<div class="calendar">
				<!--<button class="icon-left" @click="subDate" ></button>-->
				<button class="icon-left" @click="subMonth" :disabled="forSub==true ? true : false">
                           <i class="iconL" :style= "'background-image: url('+$qiniu.url+'assets/img/course.png)'"></i>
                       </button>
				<div class="clearfix">
					<span class="date">{{ today.year }}年{{ today.month }}月</span>
				</div>
				<!--<button class="icon-right" @click="addDate" v-if="showRiqi" :disabled="nowShow?true:false"></button>-->
				<button class="icon-right" @click="addMonth" :disabled="forAdd==true?true:false">
                    <i class="iconR" :style= "'background-image: url('+$qiniu.url+'assets/img/course.png)'"></i>
                 </button>
			</div>
		</div>
		<div class="calendar-desc"></div>
	</div>
</template>
<script>
	import {
		isLeap,
		setCalendar,
		getToday,
		errFun
	} from "../../tools.js";
	import "../../../static/css/table-calendar.css";
	import Loading from '../loading';
	import api from '../../api';
	export default {
		computed: {
			nowShow() {
				//判断当前的today是否是今日
				var nowDay = getToday(new Date()).day; //获取当前的时间---即今天的日期
				var nowMonth = getToday(new Date()).month;
				var nowYear = getToday(new Date()).year;
				if(this.today.day < nowDay || this.today.month < nowMonth || this.today.year < nowYear) {
					return false;
				} else {
					return true;
				}
			},
			//月份增加的查看仅能往后新增3个月的计划
			forAdd() {
				//获取当前月份
				var nowYear = getToday(new Date()).year;
				var CurrentMon = getToday(new Date()).month;
				if(this.today.month >= CurrentMon + 3) {
					return true;
				} else {
					return false;
				}
			},
			//月份往前的查看历史记录仅能查看3月
			forSub() {
				//获取当前月份
				var CurrentMon = getToday(new Date()).month;
				//往后可以查看记录
				return false;
				//				if(this.today.month <= 3) {
				//					return true;
				//				} else {
				//					console.log(false);
				//					return false;
				//				}
			},
			showRiqi() {
				return this.$store.state.nowDay.show
			},
			LoadingShow() {
				return this.$store.state.loadings.show
			},
		},
		created() {

		},
		data() {
			return {

			}
		},
		props: ['today'],
		methods: {
			//月份的增加
			addMonth() {
				this.today.month++;
				//				    this.isNow();
				this.setT(this);
				this.setBiaoge(this);
				//    this.rendar(this);
				this.checkDate(this);
				var nowMonth = getToday(new Date()).month;
				var nowYear = getToday(new Date()).year;
				var nowDay = getToday(new Date()).day;
				if(this.today.month > 12) {
					this.today.month = 1;
					this.today.year++;
					this.setT(this);
					//					this.setBiaoge(this);
					this.checkDate(this);
				};
				if(this.today.month == nowMonth) {
					this.today.day = nowDay;
					this.setT(this);
					//					this.setBiaoge(this);
					this.checkDate(this);
				};
				//				this.setHCourse(this);
				this.$emit('addMonth');
			},
			//月份的减少
			subMonth() {
				var nowMonth = getToday(new Date()).month;
				var nowYear = getToday(new Date()).year;
				var that = this;
				this.today.month--;
				this.setT(this);
				this.setBiaoge(this);
				this.checkDate(this);
				//this.setHCourse(this);
				if(this.today.month < 1) {
					this.today.month = 12;
					this.today.year--;
					this.setT(this);
					//this.setBiaoge(this);
					this.checkDate(this);
				};
				//this.setHCourse(this);
//				this.$emit('subMonth');
//				if(this.today.year != nowYear) {
//					console.log(nowYear + "newYear" + this.today.year);
//					this.setBiaogeQuan(this);
//				};
				this.$emit('subMonth');
			},
			// 渲染有课程的日期的样式
			//			setHCourse(that) {
			////				console.log(that);
			//				api.getDateCurriculum(that.today.year,that.today.month).then((response) => {
			//					// 最好渲染有课程的第一天的内容
			//					if(response.data.code == 200) {
			//						// 即改变日期
			//						console.log(that.today.year);
			//						console.log(response);
			//						response.data.result = response.data.result.sort(that.sortByL('day'))
			//						that.today.day = response.data.result[0].day;
			////						that.setBiaoge(that);
			//						return;
			//					}
			//				})
			//			},
			// 获取数组里的最小值
			sortByL(option) {
				return function(a, b) {
					return a[option] - b[option];
				}
			},
			//对表格里的内容进行渲染---即小圆圈的渲染
			setBiaoge(that) {
				//对表格进行操作
				var td = document.querySelectorAll("td");
				//将当前查看的日期高亮
				//请求ajax获取的数据
				api.getDateCurriculum(that.today.year,that.today.month).then((result) => {
					if(result.data.code == 200) {
						var data = result.data.result;
						console.log("进来啦 ");
						if(data != null) {
							var green = []; //type为0,表示的是未完成的课程
							var red = []; //type为1，表示的已经完成的课程
							//获取所有的表格
							var tds = document.querySelectorAll("td");
							//将获取的数据进行分类处理
							for(var i = 0; i < data.length; i++) {
								if(data[i].type == 0) {
									green.push(data[i].day);
								} else if(data[i].type == 1) {
									red.push(data[i].day);
								}
							}
							//针对不同的类型进行渲染
							for(var i = 0; i < tds.length; i++) {
								tds[i].children[0].classList.remove("active");
								for(var j = 0; j < green.length; j++) {
									if(tds[i].children[0].innerHTML == green[j]) {
										tds[i].classList.add("green")
									}
								}
								for(var k = 0; k < red.length; k++) {
									if(tds[i].children[0].innerHTML == red[k]) {
										tds[i].classList.add("red");
									}
								}
								// 进行当前日期的渲染
								if(tds[i].children[0].innerHTML == that.today.day) {
									tds[i].children[0].classList.add("active");
								}

							}
						}
						//移植过来
						result.data.result = response.data.result.sort(that.sortByL('day'));
						that.today.day = response.data.result[0].day;
						that.setBiaoge(that);

					} else {
						var tds = document.querySelectorAll("td");
						for(var i = 0; i < tds.length; i++) {
							// 进行当前日期的渲染
							if(tds[i].children[0].innerHTML == that.today.day) {
								tds[i].children[0].classList.add("active");
							}
						}
					}
				}).catch(function(error) {
					console.log(error);
				});
				this.$emit('setBiaoge');
			},
//			setBiaogeQuan(that) {
//				//对表格进行操作
//				var td = document.querySelectorAll("td");
//				//将当前查看的日期高亮
//				//请求ajax获取的数据
//				api.getDateCurriculum(that.today.year, that.today.month).then((result) => {
//					if(result.data.code == 200) {
//						var data = result.data.result;
//						if(data != null) {
//							var green = []; //type为0,表示的是未完成的课程
//							var red = []; //type为1，表示的已经完成的课程
//							//获取所有的表格
//							var tds = document.querySelectorAll("td");
//							//将获取的数据进行分类处理
//							for(var i = 0; i < data.length; i++) {
//								if(data[i].type == 0) {
//									green.push(data[i].day);
//								} else if(data[i].type == 1) {
//									red.push(data[i].day);
//								}
//							}
//							//针对不同的类型进行渲染
//							for(var i = 0; i < tds.length; i++) {
//								tds[i].children[0].classList.remove("active");
//								for(var j = 0; j < green.length; j++) {
//									if(tds[i].children[0].innerHTML == green[j]) {
//										tds[i].classList.add("green")
//									}
//								}
//								for(var k = 0; k < red.length; k++) {
//									if(tds[i].children[0].innerHTML == red[k]) {
//										tds[i].classList.add("red");
//									}
//								}
//								// 进行当前日期的渲染
//								if(tds[i].children[0].innerHTML == that.today.day) {
//									tds[i].children[0].classList.add("active");
//								}
//
//							}
//							//移植过来
//							result.data.result = response.data.result.sort(that.sortByL('day'));
//							that.today.day = response.data.result[0].day;
//							that.setBiaogeQuan(that);
//						}
//
//					} else {
//						var tds = document.querySelectorAll("td");
//						for(var i = 0; i < tds.length; i++) {
//							// 进行当前日期的渲染
//							if(tds[i].children[0].innerHTML == that.today.day) {
//								tds[i].children[0].classList.add("active");
//							}
//						}
//					}
//				}).catch(function(error) {
//					console.log(error);
//				});
//				this.$emit('setBiaogeQuan');
//			},
			//渲染表格----生成表格
			setT(that) {
				var calendar = document.querySelector("#calendar");
				var calendarDesc = document.querySelector(".calendar-desc");
				//首先清除上一次存在的元素,如果存在元素就移除,
				if(calendarDesc.children[0]) {
					var div = calendarDesc.children[0];
					div.parentNode.removeChild(div);
				}
				calendarDesc.appendChild(setCalendar(that.today.year, that.today.month, that.today.day));
				var table = document.querySelector("table");
				table.className = "table-calendar";
			},
			//点击选中某一天
			checkDate() {
				var tds = document.querySelectorAll("td");
				var nowDay = getToday(new Date()).day; //获取当前的时间---即今天的日期
				var nowMonth = getToday(new Date()).month;
				var nowYear = getToday(new Date()).year;
				var that = this;
				for(var i = 0; i < tds.length; i++) {
					if(tds[i].children[0].innerHTML != " ") {
						//需要进行判断当该日期内没有内容的时候就不给它点击
						//console.log(tds[i].children[0]);
						tds[i].addEventListener("click", function() {
							//添加active
							var self = this;
							//当小于今年的时候
							if(that.today.year < nowYear) {
								// 全部进行判断
//								if(self.classList == "green" || self.classList == "red") {
//									that.addClass(tds, that, self);
//								} else {
//									return;
//								}
								return;
							} else {
								//当不小于今年，判断月份，如果等于现在的月份
								if(that.today.month == nowMonth) {
									//console.log("等于啦");
									//在当前月份的时候不能仅仅只判断日期，需要判断的是当前的值与日期进行的额比较
									if(self.children[0].innerHTML < nowDay) {
										if(self.classList == "green" || self.classList == "red") {
											that.addClass(tds, that, self);
										} else {
											return;
										}
									} else {
										that.addClass(tds, that, self);
									}
								} else if(that.today.month < nowMonth) {
									//当小于当前月份的时候
									if(self.classList == "green" || self.classList == "red") {
										that.addClass(tds, that, self);
									} else {
										return;
									}
								} else if(that.today.month > nowMonth) {
									//当大于当前月份的时候
									that.addClass(tds, that, self);
								}
							}

						})
					}
					//对当前月份日期的判断
					if(tds[i].children[0].innerHTML == nowDay) {
						if(that.today.month == nowMonth && that.today.year == nowYear) {
							tds[i].children[0].classList.add("now-day")
						}
					}
				}
			},
			//仅仅只是对点击事件进行的封装
			addClass(options, that, self) {
				for(var i = 0; i < options.length; i++) {
					options[i].children[0].classList.remove("active");
				}
				self.children[0].classList.add("active");
				//改变日期
				that.today.day = self.children[0].innerHTML;
			},

		},
		mounted() {
			//			console.log("b");
//			var nowYear = getToday(new Date()).year;
//			if(this.today.year != nowYear){
//				console.log("其他年");
//				this.setBiaogeQuan(this);
//			}else{
//				console.log("今年");
//				this.setBiaoge(this);
//			}
			this.$nextTick(function() {
				//渲染表格
				//this.isNow();//现实的日期加今日的格式
				this.setT(this);
				this.setBiaoge(this);
				//循环注册时间
				this.checkDate();
			})
		},
//		created(today) {
//			console.log(today);
			//			console.log("b");
			//			this.setBiaoge(this);
//		},
		//         watch: {
		//             today: {
		//                 handler: function(val, oldVal) {
		//                     this.setT(this);
		//                     this.setBiaoge(this);
		//                        this.checkDate();
		//                 },
		//                 deep: true
		//             }
		//         },

	}
</script>
<style>
	#today-calendar {
		/*日历的样式开始*/
		.calendar-wrapper {
			width: 100%;
			height: 40px;
			position: relative;
			background-color: #31384b;
		}
		.calendar-wrapper .calendar {
			width: 140px;
			height: 40px;
			position: absolute;
			left: 0;
			top: 10px;
			right: 0;
			bottom: 0;
			margin: auto;
			text-align: center;
			font-size: 14px;
			line-height: 40px;
			color: #ffffff;
		}
		.calendar-wrapper .calendar .icon-left {
			display: block;
			position: absolute;
			top: -4px;
			left: -15px;
			width: 40px;
			height: 40px;
			background: none;
			border: none;
			outline: none;
		}
		.calendar-wrapper .calendar .icon-left .iconL {
			display: block;
			position: absolute;
			top: 0px;
			left: 15px;
			width: 10px;
			height: 40px;
			background-position: -97px 0;
			background-repeat: no-repeat;
			background-size: 300px 40px;
		}
		.calendar-wrapper .calendar .icon-right {
			display: block;
			position: absolute;
			top: -4px;
			right: -15px;
			width: 40px;
			height: 40px;
			background: none;
			border: none;
			outline: none;
		}
		.calendar-wrapper .calendar .icon-right .iconR {
			display: block;
			position: absolute;
			top: 0px;
			right: 15px;
			width: 10px;
			height: 30px;
			background-position: -114px 0;
			background-repeat: no-repeat;
			background-size: 300px 40px;
		}
		.calendar-wrapper .calendar .date {
			display: block;
			width: 80px;
			height: 35px;
			box-sizing: border-box;
			position: absolute;
			top: -5px;
			left: 30px;
		}
		.calendar-wrapper .calendar .now {
			display: block;
			width: 30px;
			height: 40px;
			text-align: left;
			float: left;
		}
		.calendar-desc {
			width: 100%;
			z-index: 9999;
			display: block;
			background-color: #31384b;
		}
		.show {
			display: block;
		}
		/*日历的样式结束*/
	}
</style>